<template>
	<view>
		<view class="body">
			<image src="../../static/logo.png" mode="aspectFill" class="logo"></image>
			<view class="card">
				<input type="number" v-model="uid" placeholder="请输入账号..." placeholder-class="text" />
			</view>
			<view class="card">
				<input confirm-type="done" @confirm="login" type="password" v-model="password" placeholder="请输入密码..."
					placeholder-class="text" />
			</view>
			<view class="login" @click="login">
				登录
			</view>

		</view>
		<view class="footer">
			<text class="">
				<text class="text" @click="retrievePassword">忘记密码</text><text class="text"> | </text><text class="text"
					@click="register">新用户注册</text>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: "",
				password: ""
			}
		},
		methods: {
			login() {
				console.log("login")
				if (this.uid == "" || this.password == "") {
					uni.showToast({
						icon: "none",
						title: "请输入ID和密码"
					});
					return;
				}
				this.$request.TokenRequest({
					url: "/user/login"
				}, {
					uid: this.uid,
					password: this.password
				}).then(res => {
					// console.log(res)
					if (res.state === 200) {
						console.log("登录成功")
						this.$store.commit("login", res.data);
						this.$socket.connectSocketInit();
						uni.switchTab({
							url: "../home/home",
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				}).catch(err => {
					console.log(err)
				})

			},
			retrievePassword() {
				console.log('retrieve password')
				uni.navigateTo({
					url: "../find_password/find_password"
				})
			},
			register() {
				console.log('register')
				uni.navigateTo({
					url: '../register/register'
				})
			}
		},
		onShow() {}
	}
</script>

<style lang="scss" scoped>
	.body {
		margin: 0 auto;
		padding-top: 160rpx;
		width: 73%;
		text-align: center;

		.logo {
			margin: 0 auto;
			width: 50%;
			text-align: center;
			font-size: 70rpx;
			padding: 30rpx;
		}

		.card {
			background-color: #F5F5F5;
			margin: 70rpx auto;
			padding: 40rpx 55rpx;
			border-radius: 50rpx;

			// width: 70%;
			.text {
				font-size: 35rpx;
			}
		}

		.login {
			font-size: 37rpx;
			color: #fff;
			background-color: #007AFF;
			width: 360rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			padding: 15rpx;
			border-radius: 40rpx;
			margin: 100rpx auto;
		}
	}

	.footer {
		width: 100%;
		position: absolute;
		bottom: 60rpx;
		text-align: center;

		.text {
			// font-weight: 600;
			font-size: 25rpx;
			margin: 0 15rpx;
		}
	}
</style>
<style>
	page {
		background-color: #80B6D5;
	}
</style>
